(function(){
	var datepicker = {};
	var monthData;
	var $wrapper;
	// 获取日历组件所需数据
	datepicker.getMonthData = function(year, month){	
		var ret = [];
		if (!year || !month) {
			var today = new Date();
			year = today.getFullYear();
			month = today.getMonth() + 1;
		}
		var firstDay = new Date(year, month - 1, 1);
		var firstDayWeekDay = firstDay.getDay();		
		if (firstDayWeekDay === 0) {
			firstDayWeekDay = 7;
		}

		var preMonthDayCount = firstDayWeekDay - 1;

		year = firstDay.getFullYear();
		month = firstDay.getMonth() + 1 ;
		var lastDay = new Date(year, month, 0);
		var lastDate = lastDay.getDate();

		var lastDayOfLastMonth = new Date(year, month - 1, 0);
		var lastDateOfLastMonth = lastDayOfLastMonth.getDate();		
		
		for(var i = 0; i < 7 * 6; i++){
			var date = i + 1 - preMonthDayCount;
			var showDate = date ;
			var thisMonth = month;
			//上一月
			if(date <= 0){
				thisMonth = month - 1;
				showDate = lastDateOfLastMonth + date;
			}else if (date > lastDate) {
				thisMonth = month + 1;
				showDate = showDate - lastDate;
			}
			if (thisMonth === 0 ) {
				thisMonth = 12;
			}else if (thisMonth === 13) {
				thisMonth = 1;
			}
			ret.push({
				month: thisMonth,
				date: date,
				showDate: showDate
			});
		}
		return {
			year: year,
			month: month,
			days: ret
		};
	};
	// 将数据与HTML结构结合
	datepicker.buildUi = function(year, month){
		monthData = datepicker.getMonthData(year, month);
		// html结构
		var html = 
		'<div class="datepicker-header">' + 
			'<a href="#" class="datepicker-btn datepicker-prev-btn">&lt;</a>' +		
			'<a href="#" class="datepicker-btn datepicker-next-btn">&gt;</a>' +		
			'<span class="datepicker-curr-month">' +
			monthData.year + '-' +
			monthData.month + '</span>' + 
		'</div>' + 
		'<div class="datepicker-body">' + 
			'<table>' + 
				'<thead>' + 
					'<tr>' + 
						'<th>一</th>' + 
						'<th>二</th>' + 
						'<th>三</th>' + 
						'<th>四</th>' + 
						'<th>五</th>' + 
						'<th>六</th>' + 
						'<th>日</th>' + 
					'</tr>' + 
				'</thead>' + 
				'<tbody>';
				for(var i = 0; i < monthData.days.length; i++){
					var day = monthData.days[i];
					if(i % 7 === 0){
						html += '<tr>';
					}
					if (day.month !== monthData.month) {
						html += '<td class="otherMonthDate" data-date="'+ day.date +'">' + day.showDate + '</td>';
					}else if(day.month === new Date().getMonth()+1 && day.showDate === new Date().getDate()){
						html += '<td class="today" data-date="'+ day.date +'">' + day.showDate + '</td>';
					}else{
						html += '<td data-date="'+ day.date +'">' + day.showDate + '</td>';
					}					
					if(i % 7 === 6){
						html += '</tr>';
					}
				} 
				html += '</tbody>' + 
			'</table>' + 
		'</div>';
		return html;
	};
	// 将日历组件渲染到页面
	datepicker.render = function(direction){
		var year, month;
		if (monthData) {
			year = monthData.year;
			month = monthData.month;
		}		
		if (direction === 'prev') {
			month--;
			if(month === 0){
				month = 12;
				year --;
			}
		}
		if (direction === 'next') {
			month++;
		}
		var html = datepicker.buildUi(year, month);	
		if(!$wrapper){
			$wrapper = document.createElement('div');
			$wrapper.className = 'datepicker-wrapper';
			document.body.appendChild($wrapper);
		}	
		$wrapper.innerHTML = html;		
	};
	function format(date){
		var ret = '';
		var padding = function(num){
			if(num <= 9){
				return '0' + num;
			}else{
				return num;
			}
		};
		ret += date.getFullYear() + '-';
		ret += padding(date.getMonth() + 1) + '-';
		ret += padding(date.getDate());
		return ret;
	}
	// 用户事件处理
	datepicker.init = function(input){		
		datepicker.render();						
		var $input = document.querySelector(input);
		var defaultDate = new Date();
		$input.value = format(defaultDate);
		var isShow = false;
		// input点击事件：显示隐藏日历组件，设置日历组件的位置
		$input.addEventListener('click', function(event){	
			if (!isShow) {				
				$wrapper.className = 'datepicker-wrapper datepicker-wrapper-show';
				isShow = true;
			}else{
				$wrapper.className = 'datepicker-wrapper';
				isShow = false;
			}			
			var $target = event.target || event.srcElement;
			var left = $target.offsetLeft;
			var top = $target.offsetTop;
			var height = $target.offsetHeight;
			$wrapper.style.top = top + height + 2 + 'px';
			$wrapper.style.left = left + 'px';
		}, false);
		// 日历组件点击事件：切换年月，选择日期添加至input
		$wrapper.addEventListener('click', function(event){
			var $target = event.target || event.srcElement;			
			if ($target.className.indexOf('datepicker-btn') !== -1) {				
				if ($target.className.indexOf('datepicker-prev-btn') !== -1) {
					datepicker.render('prev');
				}else if($target.className.indexOf('datepicker-next-btn') != -1) {
					datepicker.render('next');
				}
			}
			if ($target.tagName.toLowerCase() === 'td') {		
				var date = new Date(monthData.year, monthData.month-1, $target.dataset.date);
				$input.value = format(date);
				var activeTd = document.querySelector('td.active');
				if(activeTd){
					activeTd.className = '';
				}	
				$target.className = 'active';
				// 日期选择之后，隐藏日历组件
				$wrapper.className = 'datepicker-wrapper';
				isShow = false;
			}			
		}, false);		
	};
	window.datepicker = datepicker;
})();